<template>
    <div class="index" style=" height: 100%;">
        <el-container style=" height: 100%;">
            <el-aside width="200px">
                <menu-item
                        v-on:jump="jump"
                        ></menu-item>
            </el-aside>
            <el-container>
                <el-header>
                    <HeaderView
                            :username='username'
                            ></HeaderView>
                </el-header>
                <el-main>
                    <router-view>
                    </router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import HeaderView from "@/components/headerView";
    import MenuItem from "@/components/menuItem";
    import IndexView from "@/view/menu/index/index";
    import {getInfo} from "@/api/menu";
    import Cookies from 'js-cookie'
    export default {
        name: 'MenuView',
        data(){
            return{
                username: "",
                // routerKey: "/menu/index"
            }
        },
        components: {
            MenuItem,
            HeaderView,
            IndexView
        },
        props: {
            msg: String
        },
        methods:{
            jump(val){
                this.$router.replace(val)
            },
            getUserInfo(){
                //let authorization = Cookies.get("Authorization")
                getInfo().then(response => {
                    const { data } = response
                    if(data.code  == '200'){
                        this.username = data.data.username
                    }else{
                        alert("请从新登录！");
                    }
                })
            }
        },
        mounted(){
            this.username = this.$route.params.username
            let token =  Cookies.get("Authorization")
            if(token != undefined && token != null){
                this.getUserInfo()
            }else{
                this.$router.push("/")
            }
        }
    }
</script>

<style scoped>
    .index{
        width: 100%;
    }
    .el-header {
        background-color: #969696;
        color: #333;
        text-align: left;
        line-height: 60px;
        padding: 0 10px;
    }

    .el-aside {
        background-color: #545c64;
        color: #333;
        text-align: center;
        height: 100%;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        /*line-height: 160px;*/
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
